<template>
  <div class="search-result">
    <van-search v-model="value" @focus="onfocus" show-action>
      <div slot="action" @click="onCancel">取消</div>
    </van-search>
    <ul class="sort-tab">
      <li>综合
        <i class="icon-wrapper">
          <i class="iconfont icon-paixujiantouxia"></i>
        </i>
      </li>
      <li>销量</li>
      <li class="sort-item">
        <span>价格</span>
        <i class="icon-wrapper">
          <i class="iconfont icon-paixujiantoushang"></i>
          <i class="iconfont icon-paixujiantouxia"></i>
        </i>
      </li>
      <li>筛选
        <i class="iconfont icon-shaixuan"></i>
      </li>
    </ul>
    <div class="search-goodslist" v-if="goodsList">
      <product-list :goodsList="goodsList"></product-list>
    </div>

  </div>
</template>

<script>
import axios from "axios";
import productList from "../../components/ProductList/productList";
import { searchResult } from "../../api/getDatas";
export default {
  components: {
    productList
  },
  data() {
    return {
      goodsList: null,
      value: "",
      flag: false
    };
  },
  methods: {
    onfocus() {
      this.$router.push({ path: "/hotSearch" });
      console.log("fouse");
    },
    onCancel() {
      this.$router.push({ path: "/search" });
    },
    initData() {
      searchResult().then(res => {
        this.goodsList = res.data.data.items;
      });
    }
  },
  created() {
    this.initData();
    this.value = this.$route.query.search_key;
  }
};
</script>

<style lang="less" scoped>
.search-result {
  .search {
    position: fixed;
    background-color: white;
    top: 44px;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .sort-tab {
    line-height: 0.38rem;
    height: 0.4rem;
    background: #fff;
    border-bottom: 1px solid #f2f2f2;
    display: flex;
    li {
      display: flex;
      flex: 1;
      justify-content: center;
      align-items: center;
      .icon-wrapper {
        position: relative;
        height: 100%;
        .icon-paixujiantoushang {
          position: absolute;
        }
      }
    }
  }
}
</style>

